﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DevFx.Web.Pages.tableStype.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title></title>
 
     <style  type="text/css">
        .AlterColor
        {
            background-color: #edf1f8;
        }
        .NormalColor
        {
            background-color: #f7f6f3;
        }
        .HoverColor
        {
            background: #d7e3f6; /*这个将是鼠标高亮行的背景色*/
            cursor: pointer;
        }
        .SelectColor
        {
            background-color: #d8e7b0; /*这个将是选中高亮行的背景色*/
            cursor: pointer;
        }
     </style>
       <script src="../../Contents/scripts/jquery/jquery-1.6.2.js" type="text/javascript"></script>  
        
        <script type="text/javascript">
        //@author qs
            //@time 2011-11-13
          
        $(function () {
            gridview();
        });
        function gridview() {
            //这个地方到时候获取一下gridview的客户端id
            var gridviewId = "#gridview ";
            //偶数行变色
            $(gridviewId + ">tbody tr:even").addClass("NormalColor");
            //奇数行变色n
            $(gridviewId + ">tbody tr:odd").addClass("AlterColor");
            //鼠标移上时变色 和 单击变色
            $(gridviewId + ">tbody tr").hover(function () {
                $(this).addClass("HoverColor");
            }, function () {
                $(this).removeClass("HoverColor");
            }).click(function () {
                //这个地方是或取得jQuery对象
                var $check = $(this).find("input:checkbox");
                if ($check.attr("checked")) {
                    $(this).addClass("SelectColor");
                }
                else {
                    $(this).removeClass("SelectColor");
                }
            });
            //全选事件
            $(gridviewId + "tr:first").find(":checkbox").click(function () {
                if (this.checked) {
                    $(gridviewId + ">tbody tr").addClass("SelectColor").find("input:checkbox").attr("checked", true);
                }
                else {
                    $(gridviewId + ">tbody tr").removeClass("SelectColor").find("input:checkbox").attr("checked", false);
                }
            });
        }        
    </script>
     


</head>
<body>
    <form id="form1" method="post" action="Default2.aspx" runat="server">
  
    <div>
        <table id="gridview" style="width: 100%;">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" id="sss" />
                        第一行
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" id="Checkbox1" />
                        第二行
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" id="Checkbox2" />
                        第三行
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" id="Checkbox3" />
                        第四行
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" id="Checkbox4" />
                        第五行
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" id="Checkbox5" />
                        第六行
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>